<template>
  <MessageBox2 :page-size="pageSize" :current-page="currentPage" :total="total" :table-data="sendOrdersStore.sendOrders"
               :table-title-list="tableTitleList" :loading="loading" :table-title="tableTitle" :batch-mode="batchMode"
               @current-change="currentPageChange" @size-change="pageSizeChange" @selectionChange="updateSelectedRows">

    <template v-slot:table-btn>
      <el-table-column label="操作">
        <template #default="{row}">

          <el-button v-if="row.status === 0" icon="delivery" circle plain type="success" size="mini"
                     @click="openDeliveryDialog(row)">发货
          </el-button>
        </template>
      </el-table-column>
    </template>
  </MessageBox2>

  <el-dialog v-model="deliveryDialogVisible" title="发货单详情" width="30%">
    <el-form :model="deliveryDetail" label-width="120px">
      <el-form-item label="发货单编号">
        <el-input v-model="deliveryDetail.deliveryId" disabled></el-input>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input v-model="deliveryDetail.orderId" disabled></el-input>
      </el-form-item>
      <el-form-item label="商品编号">
        <el-input v-model="deliveryDetail.productId" disabled></el-input>
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input v-model="deliveryDetail.productName" disabled></el-input>
      </el-form-item>
      <el-form-item label="发货数量">
        <el-input v-model="deliveryDetail.quantityShipped" disabled></el-input>
      </el-form-item>
      <el-form-item label="发货时间" required>
        <el-date-picker
            v-model="deliveryDetail.deliveryDate"
            type="datetime"
            placeholder="选择时间"
            value-format="YYYY-MM-DD HH:mm:ss">
        </el-date-picker>

      </el-form-item>
      <el-form-item label="物流单号" required>
        <el-input v-model="deliveryDetail.trackingNumber"></el-input>
      </el-form-item>
      <el-form-item label="发货状态">
        <el-tag v-if="deliveryDetail.status===1" type="success">已发货</el-tag>
        <el-tag v-else type="danger">未发货</el-tag>
      </el-form-item>
      <el-form-item label="创建时间">

        {{ deliveryDetail.createTime }}
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="deliveryDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmDelivery">确认发货</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, ref} from 'vue'
import MessageBox2 from "@/components/MessageBox2.vue";
import {SendOrdersStore} from "@/stores/modules/SendOrders.js";
import {getSendOrderListService, updateSendOrderService} from "@/api/SendOrder"
import {ElMessageBox} from "element-plus";


// 获取store 数据
const sendOrdersStore = SendOrdersStore()

// 表格参数
const tableTitle = "发货单信息"
const tableTitleList = {
  deliveryId: "发货单编号",
  orderId: "订单编号",
  productId: "商品编号",
  productName: "商品名称",
  quantityShipped: "发货数量",
  deliveryDate: "发货时间",
  trackingNumber: "物流单号",
  createTime: "创建时间",
  status: "发货状态"
}
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const getSendOrderPage = async (currentPage, pageSize) => {
  loading.value = true
  try {
    const res = await getSendOrderListService(currentPage.value, pageSize.value)
    if (res.status === 200) {
      sendOrdersStore.setSendOrders(res.data.data.records)
      total.value = res.data.data.total
    }
  } catch (e) {
    await ElMessageBox.alert(e.message, '错误', {
      confirmButtonText: '确定',
      type: 'error',
    })
    console.log(e)
  } finally {
    loading.value = false
  }
}
//子组件触发
const currentPageChange = (cP) => {
  currentPage.value = cP
  getSendOrderPage(currentPage, pageSize)
}
const pageSizeChange = (size) => {
  pageSize.value = size
  getSendOrderPage(currentPage, pageSize)
}

// 弹窗显示状态和发货单详情
const deliveryDialogVisible = ref(false);
const deliveryDetail = reactive({
  deliveryId: "",
  orderId: "",
  productId: "",
  productName: "",
  quantityShipped: 0,
  deliveryDate: "",
  trackingNumber: "",
  status: 0,
  createTime: "",
});

// 打开发货单详情弹窗
const openDeliveryDialog = (row) => {
  deliveryDetail.deliveryId = row.deliveryId;
  deliveryDetail.orderId = row.orderId;
  deliveryDetail.productId = row.productId;
  deliveryDetail.productName = row.productName;
  deliveryDetail.quantityShipped = row.quantityShipped;
  deliveryDetail.deliveryDate = row.deliveryDate;
  deliveryDetail.trackingNumber = row.trackingNumber;
  deliveryDetail.status = row.status;
  deliveryDetail.createTime = row.createTime;
  console.log(deliveryDetail)
  deliveryDialogVisible.value = true;
};

// 确认发货
const confirmDelivery = () => {
  // 检查字段
  if (deliveryDetail.trackingNumber === ""
      || deliveryDetail.deliveryDate === ""
      || deliveryDetail.trackingNumber === null || deliveryDetail.deliveryDate === null) {
    ElMessageBox.alert("发货单编号或发货时间不能为空", '错误', {
      confirmButtonText: '确定',
      type: 'error',
    })
    return
  }

  updateSendOrderService(deliveryDetail).then(res => {
    console.log(res)
    if (res && res.status === 200 && res.data.data == "success") {
      ElMessageBox.alert("发货成功", '提示', {
        confirmButtonText: '确定',
        type: 'success',
      })
      deliveryDialogVisible.value = false;
      getSendOrderPage(currentPage, pageSize)
    } else {
      ElMessageBox.alert("发货失败,请检查货品数量等问题,已自动生成进货单", '错误', {
        confirmButtonText: '确定',
        type: 'error',
      })
    }
  }).catch(e => {
    ElMessageBox.alert(e.message, '错误', {
      confirmButtonText: '确定',
      type: 'error',
    })
  })
};


const batchMode = ref(false); // 是否启用批量模式
const selectedRows = ref([]); // 存储选中的行数据
const updateSelectedRows = (rows) => {
  selectedRows.value = rows;
};

// 初始化
console.log("初始化")
getSendOrderPage(currentPage, pageSize)
console.log("初始化结束")

</script>

<style scoped>

</style>